<template>
	<view class="wrap">
		<xk-header title="我的预约"></xk-header>
		<scroll-view scroll-y @scrolltolower="getMore" style="height: 100vh;">
			<view class="list" v-if="listData.length">
				<view class="list-item" v-for="(item,i) in listData" :key="i">
					<appointmentListItem :itemData="item" @click="clickItem(item)" @clickRightBottom="navToOrder(item)"></appointmentListItem>
				</view>
				<noData></noData>
			</view>
			<view v-else class="flex-row-center" style="height: 90vh;">
				<u-empty mode="list" text="暂无数据"></u-empty>
			</view>
		</scroll-view>
		
		<appointmentItemPopup 
		:showPopup="showItemPopup" 
		:popupData="appointmentData" 
		@leftButtonClick="deleteOrder"
		@close="closePopup" />
	</view>
</template>

<script>
import request from './api.js';

export default {
  data() {
    return {
      listData: [],
      appointmentData: {},
      showItemPopup: false,
      pages: {
        page: 1,
        size: 10,
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods:{
	  getList(){
		  request.getApplyList({...this.pages}).then(res => {
		  		console.log(res);
		    if (res.length) {
		      res.forEach(item => {
		        this.listData.push({
					name: item.meeting_room_name,
					status: item.book_status,
					num: item.capacity || 0,
					device: item.meeting_configuration || '',
					time: this.subTimeStr(item.start_time,item.end_time),
					startTime: item.start_time,
					endTime: item.end_time,
					id: item.apply_id,
					meetingId: item.meeting_room_id,
				});
		      });
		    } else {
		      this.pages.page--;
		      uni.$u.toast('暂无数据');
		    }
		  });
	  },
	  getMore(){
	  	  this.pages.page++;
	  	  this.getList();
	  },
	  clickItem(item){
		  this.appointmentData = item
		  this.showItemPopup = true
	  },
	  navToOrder(item){
		  request.checkOvertime({applyId:item.id}).then(res =>{
		  	uni.navigateTo({
		  		url: `activitySiteReservation?id=${item.meetingId}&name=${item.name}&num=${item.num}&endTime=${item.endTime}`
		  	})
		  })
		  .catch(e =>{
			  console.log(e);
			  setTimeout(() =>{
				  uni.$u.toast('已超过时间或会议后已有人预约')
			  },500)
		  })
	  },
	  deleteOrder(){
		  uni.showModal({
		  	title:'是否要取消会议预约',
		  	success: (res) => {
		  		if(res.confirm){
		  			const data = {
		  				applyId: this.appointmentData.id
		  			}
		  			request.cancelOrder(data).then(res =>{
		  				uni.$u.toast('取消成功')
						this.listData = []
						this.pages.page = 1
		  				this.getList()
		  				
		  				setTimeout(() =>{
		  					this.closePopup()
		  				},500)
		  			})
		  		}
		  	}
		  })
	  },
	  subTimeStr(startTime,endTime){
		  let str = ''
		  if(startTime && endTime) str = `${startTime} - ${endTime}`
		  return str
	  },
	  closePopup(){
		  this.showItemPopup = false
	  }
  }
};
</script>

<style lang="scss" scoped>
.wrap{
	overflow-y: hidden;
	.list{
		padding: 36rpx;
		&-item{
			margin-top: 32rpx;
			content-visibility: auto;
		}
		&-item:first-child{
			margin-top: 0;
		}
		
		.order-item{
			padding: 28rpx 26rpx 20rpx;
			border: 1px solid rgba(187, 187, 187, 0.56);
			color: #9D9999;
			font-size: 28rpx;
			border-radius: 10rpx;
			content-visibility: auto;
			
			view{
				margin-bottom: 18rpx;
			}
			.title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				view{
					margin-bottom: 0;
				}
			}
			.state{
				border: 1px solid rgba(187, 187, 187, 1);
				font-size: 24rpx;
				border-radius: 6rpx;
				padding: 6rpx 0;
				width: 140rpx;
				text-align: center;
			}
			.time{
				color: #000C17;
				font-size: 36rpx;
			}
		}
	}
}
</style>
